import React, { useEffect, useState } from 'react'

import { Button, Toast, NavBar } from 'antd-mobile'
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
import styles from './index.module.less'
import axios from 'axios'
import qs from 'qs'
import { payConfirm } from '@/utils/my/order'
export default function PayResult() {

    const navigate = useNavigate()
    const [content, steCont] = useState('加载中.....')
    // 获取传递来的价格
    const [searchParams] = useSearchParams()
    let price = searchParams.get('total_amount') as string
    let payType = searchParams.get('payType') as string
    let orderId = searchParams.get('orderId')
    console.log(payType, orderId);

    let data = {
        out_trade_no: searchParams.get('out_trade_no') as string,
        trade_no: searchParams.get('trade_no') as string,
    }

    async function isPay() {
        let { data: res } = await axios.post('http://localhost:3999/api/ispay', qs.stringify(data))

        if (res.success === '支付成功') {
            pays({
                payType: parseInt(payType),
                orderId: orderId,
                map: JSON.parse(localStorage.getItem('adress') as string)
            })
            steCont(res.msg)
        } else {
            steCont(res.msg)
        }
    }

    const pays = async (data: any) => {
        let res: resType = await payConfirm(data)
        if (res.code === 20000) {
            console.log('跳转至成功页面')
            steCont('支付成功')
        } else {
            Toast.show({
                icon: 'fail',
                content: res.message,
                duration: 1500
            })
        }
    }

    useEffect(() => {
        if (payType === '1') {
            isPay()
        } else {
            steCont('支付成功')
        }

    }, [])


    // 回到个人中心
    const gotoMy = () => {
        navigate(`/my`, { replace: true })
    }



    function back() {
        navigate('/my/car')
    }

    return (
        <div>
            <NavBar onBack={back} className={styles.topNav}>乐居</NavBar>
            {/* <Navbar title='乐居'></Navbar> */}
            <div className={styles.resultBox}>
                <div className={styles.title}>{content}</div>
                <div>支付金额:{price}元</div>
            </div>
            <div className={styles.btn}>
                <Button color='primary' fill='outline' onClick={gotoMy}>个人中心</Button>
            </div>
        </div>
    )
}
